<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test"></div>

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- jsx转为js -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">
    // 函数式组件，要大写字母开头
    function ZuJian() {
        console.log(this) // this是undefind，因为babel开启了use strict
        return  <h2>我是组件</h2>
    }

    // 渲染组件页面
    ReactDOM.render(<ZuJian/>, document.getElementById("test"))

    // ReactDOM.renderz执行之后两件事情：
    // 1、React解析组件标签，找到了ZuJian组件
    // 2、发现组件是函数定义的，随后调用函数
    //  将返回的虚拟dom转为真实的dom，随后呈现页面
</script>
</body>
</html>